<template>
  <div class="app-container" v-loading="loading">
    <div class="header page-title">
      <div class="header-left">
        用水成本概览
        <WaterFilter v-model="filter" />
      </div>
      <CustomDatePicker v-model="dateRange" />
    </div>

    <el-container class="main-container">
      <div class="content-wrapper">
        <el-empty v-if="false" description="没有找到符合条件的表计数据" />
        <template v-else>
          <!-- 静态统计 -->
          <StatisticsCard class="mb-16" />

          <!-- 统计表格和不明水分摊 -->
          <el-row :gutter="20" class="flex-row">
            <el-col :span="16" class="flex-col">
              <WaterUsageTable :dateRange="dateRange" class="flex-fill" />
            </el-col>
            <el-col :span="8" class="flex-col">
              <UnknownWaterAnalysisCard :dateRange="dateRange" class="flex-fill" />
            </el-col>
          </el-row>
        </template>
      </div>
    </el-container>
  </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import dayjs from "dayjs";

// Components
import StatisticsCard from "./components/StatisticsCard.vue";
import WaterUsageTable from "./components/WaterUsageTable.vue";
import UnknownWaterAnalysisCard from "./components/UnknownWaterAnalysisCard.vue";
import WaterFilter from "./components/WaterFilter.vue";
import { useCompanyStore } from "@/stores/company";
import { handleError } from "@/utils/handleError";
import { useWaterPriceStore } from "@/stores/waterPrice";
import { usePriceRuleStore } from "@/stores/priceRule";
import CustomDatePicker from "@/components/header/CustomDatePicker.vue";

let priceStore = useWaterPriceStore();
let priceRuleStore = usePriceRuleStore();
let companyStore = useCompanyStore();
const loading = ref(false);
const dateRange = ref(getDateRange());

function getDateRange() {
  const start = dayjs().startOf("month").valueOf();
  const end = dayjs().startOf("day").valueOf();
  if (dayjs().isSame(dayjs().endOf("month"), "day")) {
    return [start.add(1, "day").valueOf(), end];
  }
  return [start, end];
}

let filter = ref({
  type: "overview",
  subType: null,
});

watchEffect(async () => {
  try {
    let params = {
      key: "company_id",
      value: companyStore.currentCompany.id,
    };
    switch (filter.value.type) {
      case "overview":
        params.key = "company_id";
        params.value = companyStore.currentCompany.id;
        break;
      case "byEnergyUser":
        if (filter.value.subType) {
          params.key = "energy_user_id";
          params.value = filter.value.subType;
        } else return;
        break;
      case "byArea":
        if (filter.value.subType) {
          params.key = "area_id";
          params.value = filter.value.subType;
        } else return;
        break;
      default:
        return;
    }
    loading.value = true;
    await Promise.all([
      priceStore.getPriceDetail({
        [params.key]: params.value,
        start_time: dateRange.value[0],
        end_time: dateRange.value[1],
      }),
      priceStore.getLastPriceDetail({
        [params.key]: params.value,
        start_time: dayjs(dateRange.value[0]).subtract(1, "year").valueOf(),
        end_time: dayjs(dateRange.value[1]).subtract(1, "year").valueOf(),
      }),
      priceRuleStore.fetchPriceRuleList({
        company_id: companyStore.currentCompany.id,
      }),
    ]);
  } catch (error) {
    handleError(error, "获取价格数据失败");
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.flex-row {
  flex: 1;
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-fill {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-4 {
  margin-bottom: 16px;
}
</style>
